<?php
session_start();
include('database.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
<title>ICT2</title>
<link rel="icon" 
      type="image/png" 
      href="http://files.softicons.com/download/web-icons/vector-stylish-weather-icons-by-bartosz-kaszubowski/png/48x48/sun.rays.medium.png">
<!-- slider newest -->
<link href="slider/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="slider/js-image-slider.js" type="text/javascript"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/cover.css">

<!-- login box css 
	<link rel="stylesheet" href="css/login.css"> -->

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>

<Script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500);
        return false;
      }
    }
  });
});

$(document).ready(function () {
//used to scroll up
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

</script>	
</head>
<body>
<div class="page_one" id="page_one">
<script type="text/javascript"> 
      $(document).ready( function() {
        $('#success_message').delay(3000).fadeOut();
      });
</script>
<?php
if($_GET[email]=='sent'){
?>

<div id="success_message">
<div class="alert alert-success">Email has been sent...!</div>
</div>
<?php
}
?>

<?php
//update password...!!
if($_GET[update]=='success'){
?>
<div id="success_message">
<div class="alert alert-success">Password has been successfully changed...!</div>
</div>
<?php
}
?>



<?php
if($_GET[email]=='registration'){
?>
<div id="success_message">
<div class="alert alert-success">Your Registration Has Been Complete. Please Check your email..! Thanks...</div>
</div>
<?php
session_destroy();
}
?>
<?php
if($_SESSION[login]=='success'){ //login successfully, then show dialog box and disable register and login page.
?>
<script type="text/javascript"> 
      $(document).ready( function() {
        $('#success_message').delay(3000).fadeOut();
		 $('#page_two').css('display','none');
		 $('#page_three').css('display','none');
		  $('#footer_registration').css('display','none');
      });
</script>
<div id="success_message">
<div class="alert alert-success">Login Sucessfully..!! Now you can explore the Game..!</div>
</div>
<?php
}else if($_SESSION[login]!='success') //has not login, then show register and login page.
{
?>
<script type="text/javascript"> 
      $(document).ready( function() {
		 $('#page_two').css('display','block');
		  $('#page_three').css('display','block');
		   $('#footer_registration').css('display','block');
      });
</script>
<?php
}
?>
<?php
if($_GET[error]=='true'){
?>
<script type="text/javascript"> 
      $(document).ready( function() {
        $('#success_message').delay(3000).fadeOut();
      });
</script>
<div id="success_message">
<div class="alert alert-danger">You enter wrong username or password, please try again..!</div>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
$('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
	  
$('.navbar-collapse .home').click(function (e) {
        $('#satu').addClass('active');
		$('#dua').removeClass();
		$('#tiga').removeClass();
		$('#empat').removeClass();
		$('#lima').removeClass();
		$('#enam').removeClass();
		$('#tujuh').removeClass();
      });	  
$('.navbar-collapse .register').click(function (e) {
        $('#dua').addClass('active');
		$('#satu').removeClass();
		$('#tiga').removeClass();
		$('#empat').removeClass();
		$('#lima').removeClass();
		$('#enam').removeClass();
		$('#tujuh').removeClass();
      });	  
	$('.navbar-collapse .login').click(function (e) {
        $('#tiga').addClass('active');
		$('#dua').removeClass();
		$('#satu').removeClass();
		$('#empat').removeClass();
		$('#lima').removeClass();
		$('#enam').removeClass();
		$('#tujuh').removeClass();
      });  
	  $('.navbar-collapse .game').click(function (e) {
        $('#empat').addClass('active');
		$('#dua').removeClass();
		$('#satu').removeClass();
		$('#tiga').removeClass();
		$('#lima').removeClass();
		$('#enam').removeClass();
		$('#tujuh').removeClass();
      });  
	  $('.navbar-collapse .gallery').click(function (e) {
        $('#lima').addClass('active');
		$('#dua').removeClass();
		$('#satu').removeClass();
		$('#empat').removeClass();
		$('#tiga').removeClass();
		$('#enam').removeClass();
		$('#tujuh').removeClass();
      });  
	  $('.navbar-collapse .our_team').click(function (e) {
        $('#enam').addClass('active');
		$('#dua').removeClass();
		$('#satu').removeClass();
		$('#empat').removeClass();
		$('#tiga').removeClass();
		$('#lima').removeClass();
		$('#tujuh').removeClass();
      });  
	  $('.navbar-collapse .contact_us').click(function (e) {
        $('#tujuh').addClass('active');
		$('#dua').removeClass();
		$('#satu').removeClass();
		$('#empat').removeClass();
		$('#tiga').removeClass();
		$('#enam').removeClass();
		$('#lima').removeClass();
      });  
});
</script>
<!-- Small Menu -->
<div id="small_main_menu">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

	   <?php
				if($_SESSION[login]=='success'){
				?>
	  <div id="welcome">
	 
	 <p> Welcome <b><?php echo $_SESSION[username]; ?></b>    
	  </br><p><a href="#page_three">Click here</a> to start TOUR</p>
	 </br><a href="logout.php"><font color=red>Logout</font></a></p>
	 
	  </div>
	  <?php
				}
				?>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active" id="satu"><a href="#page_one" class="home">HOME</a></li>
		<?php
				if($_SESSION[login]!='success'){
				?>
        <li id="dua" ><a href="#page_two" class="register">REGISTER</a></li>
		<li id="tiga"><a href="#page_three" class="login">LOGIN</a></li>
		<?php
				}
				?>
        <li id="empat"><a href="#page_four" class="game">GAME</a></li>
		<li id="lima"><a href="#page_five" class="gallery">GALLERY</a></li>
		<li id="enam"><a href="#page_six" class="our_team">OUR TEAM</a></li>
		<li id="tujuh"><a href="#page_seven" class="contact_us">CONTACT US</a></li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>

<div id="big_main_menu">
			
			
          <div class="menu" >
           
			
              <ul class="navigation">
                <li class="active"><a href="#page_one"><img id="home" src="images/menu/home.png" height=75px width=130px; style="margin-top:-40px;"></img></a></li>
				<?php
				if($_SESSION[login]!='success'){
				?>
                <li><a href="#page_two"><img class="registration" src="images/menu/registration.png" height=75px width=200px style="margin-top:-10px"></img></a></li>
				<li><a href="#page_three"><img src="images/menu/login.png" height=75px width=130px style="margin-top:30px;"></img></a></li>
				<?php
				}
				?>
				<li><a href="#page_four"><img class="flash_tour" src="images/menu/flash_tour.png" height=75px width=130px style="margin-top:40px;"></img></a></li>
               
				<li><a href="#page_six"><img class="our_team" src="images/menu/our_team.png" height=75px width=150px style="margin-top:-20px;"></img></a></li>
				<li><a href="#page_seven"><img class="contact_us" src="images/menu/contact_us.png" height=75px width=190px;></img></a></li>
              </ul>
          
          </div>
		  <?php
		  if($_SESSION[login]=='success'){
		  ?>
		  <div id="pannel">Welcome <b><?php echo $_SESSION[username];  ?></b>
		   </br><p style="font-size:18px"><a href="#page_four">Click here</a> to start
		  <a href="logout.php"><font color=red>Logout</font></a></p>
		  
		  </div>
		  <?php  }  ?>
</div>
<div id="slide">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
   
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/background1_down.jpg" >
      <div class="carousel-caption">
       
      </div>
    </div>
	
	
  </div>

</div>
</div>

<article style="height: 1000px">
 
   
    <a href="#" class="scrollup"></a>
</article>
</div>
<div class="page_two" id="page_two">
<div class="row"></div>
				<div class="register-info-wraper">
        			<div id="register-info">
        			
        				<h1>You are about 30 seconds away from using <b>KIDS WEBSITE.</b> Good choice!</h1>
        			
        				<ul dir="rtl" class="crayon_font">
        					<li>Fully Games for FREE</li>
        					<li>Many Downloadable Pictures</li>
        					<li>Login using Facebook Account</li>
        					<li>!So register, like, right NOW</li>
        				</ul>
        			<div id="register_button"><a href="#register-wraper">Register Click Here</a></div>	
        			</div>
        		</div>

<Script>
//register validation
$(document).ready(function(){
var valid=false;

//check maximum character
$("#first_name").keyup(function(e){
txtVal = $(this).val();  
 if( txtVal.length>20)
 {
     $(this).val(txtVal.substring(0,20) )
 }
 $(this).val($(this).val().replace(/[^A-Za-z]/g,''))
});	
$("#last_name").keyup(function(e){
txtVal = $(this).val();  
 if( txtVal.length>20)
 {
     $(this).val(txtVal.substring(0,20) )
 }
 $(this).val($(this).val().replace(/[^A-Za-z]/g,''))
});	
$("#username").keyup(function(e){
txtVal = $(this).val();  
 if( txtVal.length>15)
 {
     $(this).val(txtVal.substring(0,15) )
 }
});




$("#register-form").submit(function() {

//cek it is empty or not for each form
if($("#first_name").val() =='')
{
$("#first_name").css("border-color","red");
valid=false;
}
if($("#last_name").val() =='')
{
$("#last_name").css("border-color","red");
valid=false;
}
if($("#username").val() =='')
{
$("#username").css("border-color","red");
valid=false;
}
if($("#email").val() =='')
{
$("#email").css("border-color","red");
valid=false;
}
if($("#password").val() =='')
{
$("#password").css("border-color","red");
valid=false;
}
if($("#agree").not(':checked'))
{
$("#agree_text").css("color","red");
valid=false;
}

//if not empty
if($("#first_name").val() !='')
{
$("#first_name").css("border-color","silver");
valid=false;
}
if($("#last_name").val() !='')
{
$("#last_name").css("border-color","silver");
valid=false;
}
if($("#username").val() !='')
{
$("#username").css("border-color","silver");
valid=false;
}
if($("#email").val() !='')
{
$("#email").css("border-color","silver");
valid=false;
}
if($("#password").val() !='')
{
$("#password").css("border-color","silver");
valid=false;
}
if($("#agree").is(':checked'))
{
$("#agree_text").css("color","black");
valid=false;
}

//true if...

if($('#agree').is(':checked') && $("#password").val() !='' && $("#email").val() !='' && $("#username").val() !='' && $("#last_name").val() !='' && $("#first_name").val() !='') {
valid=true;
}


if(valid)
{
return true;
}else
{

return false;
}

});


});
</script>

				<div id="register-wraper">
<script>
$(document).ready(function(){
$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
});
</script>				
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#user_register" data-toggle="tab">Register as User</a></li>
  <li><a href="#developer_register" data-toggle="tab">Register as Developer</a></li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane fade in active" id="user_register">
  
  <form id="register-form" class="form" action="register.php" method="POST">
     </br>  		     
        		        <div class="body">
        		        	<!-- first name -->
        		        	<div class="control-group control-inline">
        		        		<label for="name">First name (max 20 characters)</label>
        		        		<input name="first_name" id="first_name" class="input-huge" type="text" >
        		        	</div>
        		        	<!-- last name -->
        		        	<div class="control-group control-inline">
        		        		<label for="surname">Last name (max 20 characters)</label>
        		        		<input name="last_name" id="last_name" class="input-huge" type="text">
        		        	</div>
        		        	<!-- username -->
        		        	<div class="control-group control-inline">
							<label>Username (max 15 characters)</label>
        		        	<input class="input-medium" id="username" type="text" name="username">
							</div>
        		        	<!-- email -->
							<div class="control-group control-inline">
        		        	<label>E-mail</label>
        		        	<input class="input-medium" id="email" type="email" name="email">
							</div>
        		        	<!-- password -->
							<div class="control-group control-inline">
        		        	<label>Password</label>
        		        	<input class="input-medium" id="password" type="password" name="password">
							</div>

        		        </div>
        		    
        		        <div class="footerr">
        		            <label class="checkbox inline">
        		                <input type="checkbox" id="agree" value="agree" /><font id="agree_text"> I agree with Term & Condition </font>
        		            </label>
        		            </br></br><button type="submit" class="btn btn-success">Register</button>
							
        		        </div>
        		    </form>
  
  
  
  
  
  
  </div>
  <div class="tab-pane fade" id="developer_register">
  
  <form id="register-developer-form" class="form" action="register.php" method="POST">
     </br>  		     
        		        <div class="body">
        		        	<!-- first name -->
        		        	<div class="control-group control-inline">
        		        		<label for="name">First name (max 20 characters)</label>
        		        		<input name="first_name" id="first_name" class="input-huge" type="text" >
        		        	</div>
        		        	<!-- last name -->
        		        	<div class="control-group control-inline">
        		        		<label for="surname">Last name (max 20 characters)</label>
        		        		<input name="last_name" id="last_name" class="input-huge" type="text">
        		        	</div>
        		        	<!-- username -->
        		        	<div class="control-group control-inline">
							<label>Username (max 15 characters)</label></br>
        		        	<input class="input-medium" id="username" type="text" name="username">
							</div>
							<table border=0 id="table_registration_developer">
							<tr>
        		        	<!-- email -->
							<div class="control-group control-inline">
        		        	<td style="text-align:right"><label>E-mail&nbsp;&nbsp;</label></td>
        		        	<td style="text-align:left"><input class="input-small" id="email" type="email" name="email"></td>
							</div>
							</tr>
							<tr>
        		        	<!-- password -->
							<div class="control-group control-inline">
        		        	<td style="text-align:right"><label>Password&nbsp;&nbsp;</label></td>
        		        	<td style="text-align:left"><input class="input-small" id="password" type="password" name="password"></td>
							</div>
							</tr>
							
							<tr>
							<div class="control-group control-inline">
        		        	<td style="text-align:right"><label>Age&nbsp;&nbsp;</label></td>
        		        	<td style="text-align:left"><input class="input-extra-small" id="age" type="number" name="age"></td>
							</div>
							</tr>
							</table>

        		        </div>
        		    
        		        <div class="footerr">
        		            <label class="checkbox inline">
        		                <input type="checkbox" id="agree" value="agree" /><font id="agree_text"> I agree with Term & Condition </font>
        		            </label>
        		            </br></br><button type="submit" class="btn btn-success">Register</button>
							
        		        </div>
        		    </form>
  
  
  
  
  </div>

</div>
				
				
				
				
				
				
        		    
        		</div>




</div>
<div class="footer_registration" id="footer_registration">Already have a <b>Facebook</b> Account? <a href="#page_three" class="btn btn-black">Sign in</a></div>
<div class="page_three" id="page_three">

<?php
if($_GET[account]=='activated'){
?>

<div id="success_message">
<div class="alert alert-success">Your Account now is ready to use (Activated)...!</div>
</div>
<?php
}
?>
		<div class="container">
			
					<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
					  <!-- Indicators -->
					 

					  <!-- Wrapper for slides -->
					  <div class="carousel-inner">
						<div class="item active">
						  <img src="http://photos1.blogger.com/x/blogger/4525/2278/1600/404382/YBscooterLooterRiver.png" class=blur />
						  <div class="carousel-caption">
						   
						  </div>
						</div>
						<div class="item">
						  <img src="http://photos1.blogger.com/blogger/6884/1394/1600/JiggersJinx.jpg" class=blur />
						  <div class="carousel-caption">
						   
						  </div>
						</div>
					   <div class="item">
						  <img src="http://photos1.blogger.com/blogger/4525/2278/1600/YBbigBreak_longShot1a.jpg" class=blur />
						  <div class="carousel-caption">
						   
						  </div>
						</div>
					  </div>
					
					</div> 
			
<script>	 //login validation		
$(document).ready(function(){
var valid=false;			
		
$("#login-form").submit(function() {
//if empty value..
if($("#username_login").val() =='')
{
$("#username_login").css("border-color","red");
valid=false;
}
if($("#password_login").val() =='')
{
$("#password_login").css("border-color","red");
valid=false;
}

//if not empty..
if($("#username_login").val() !='')
{
$("#username_login").css("border-color","silver");
}
if($("#password_login").val() !='')
{
$("#password_login").css("border-color","silver");
}


//true if...

if($("#password_login").val() !='' && $("#username_login").val() !='') {
valid=true;
}




if(valid)
{
return true;
}else
{

return false;
}

});


});


		
</script>			
				<div id="login-wraper">
					<form class="form login-form" id="login-form" action="login.php" method="POST">
<script>
$(document).ready(function(){
$('#tab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
});
</script>					
<ul class="nav nav-tabs" id="tab">
<?php if($_GET[active]!="reset"){ ?>
  <li class="active"><a href="#login_tab" data-toggle="tab">Login</a></li>
  <li ><a href="#facebook_tab" data-toggle="tab">Facebook / Tweeter</a></li>
  <li><a href="#forgot_tab"  data-toggle="tab">Forgot Password</a></li>
 
<?php	}else if($_GET[active]=="reset"){		?>
 <li><a href="#login_tab" data-toggle="tab">Login</a></li>
 <li ><a href="#facebook_tab" data-toggle="tab">Facebook / Tweeter</a></li>
  <li><a href="#forgot_tab"  data-toggle="tab">Forgot Password</a></li>
  <li class="active"><a href="#reset_tab"  data-toggle="tab">Reset Password</a></li>
<?php } ?>
</ul>	

<!-- Tab panes -->
<div class="tab-content center">
<?php if($_GET[active]!="reset"){ ?>
  <div class="tab-pane fade in active" id="login_tab">
 <?php	}else if($_GET[active]=="reset"){		?> 
 <div class="tab-pane fade in" id="login_tab">
 <?php } ?>
  <legend><span class="blue">SIGN IN</span></legend>
					
						<div class="body">
							<label>Username</label></br>
							<input type="text" id="username_login" name="username_login"></br>
							
							<label>Password</label></br>
							<input type="password" id="password_login" name="password_login">
						</div>
					
						<div class="footer">
							<label class="checkbox inline">
								<input type="checkbox" id="remember" value="remember"> Remember me
							</label>
										
							<button type="submit" class="btn btn-success">Login</button>
							
						</div>
					
					</form>
  
  </div>
  
  <div class="tab-pane fade" id="facebook_tab">
  <h1>Twitter / Facebook</h1></br></br>
    <a href="http://ict2.natawebs.com/social_media/index.php?login&oauth_provider=twitter"><img src="http://ict2.natawebs.com/social_media/images/tw_login.png"></a>&nbsp;&nbsp;&nbsp;
    <a href="http://ict2.natawebs.com/social_media/index.php?login&oauth_provider=facebook"><img src="http://ict2.natawebs.com/social_media/images/fb_login.png"></a> 
  </div>
  <div class="tab-pane fade" id="forgot_tab">
<script>

</script>  
  <form class="form login-form" id="forgot_pass_form" action="forgot.php" method="POST">
  <div class="tab-pane fade in active" id="login_tab">
  <legend><span class="blue">FORGOT PASSWORD</span></legend>
  <div class="body">
  <label>Enter Email Address</label></br>
  <input type="email" id="forgot_email" name="forgot_email"></br>
  </div>
  <div class="footer">
  <button type="submit" class="btn btn-success">OK</button>
  
  </div>
 
  </form>
  
  </div>

</div>

<?php if($_GET[active]!="reset"){ ?>

 <?php	}else if($_GET[active]=="reset"){		?> 
<div class="tab-pane fade in active" id="reset_tab">
  
<script>

$(document).ready(function(){

$("#reset_pass_form").submit(function() {
var valid=false;
//if empty
if($("#reset_password1").val() =='' || $("#reset_password2").val() =='' || ($("#reset_password1").val() != $("#reset_password2").val()))
{
$("#reset_password1").css("border-color","red");
$("#reset_password2").css("border-color","red");
valid=false;
}

//true if...

if($("#reset_password1").val() == $("#reset_password2").val() && $("#reset_password1").val()!='' && $("#reset_password2").val()!='') {
$("#reset_password1").css("border-color","silver");
$("#reset_password2").css("border-color","silver");
valid=true;
}

if(valid)
{
return true;
}else
{
return false;
}
});
});
</script>
  
  <div class="tab-pane fade in active" id="login_tab">
  <form class="form login-form" id="reset_pass_form" action="reset_password.php" method="POST">
  <legend><span class="blue">RESET PASSWORD</span></legend>
  <div class="body">
  <label>Enter New Password</label></br>
  <input type="password" id="reset_password1" name="reset_password1"></br>
  <label>Enter New Password again</label></br>
  <input type="password" id="reset_password2" name="reset_password2"></br>
  </div>
  <div class="footer">
  <button type="submit" class="btn btn-success">OK</button>
  
  </div>
 
  </form>
  
  </div>

</div>
<?php } ?>			
						
				</div>
 </div>
			</div>
	<div class="footer_login">
      Don't have an account yet? <a href="#page_two" class="btn btn-black">Register</a>
    </div>


</div>
<div class="page_four" id="page_four"> <!-- game -->
<?php if($_SESSION[login]=='success'){ ?>
<iframe id="iframe" src="flash/Main.swf">
</iframe>
<?php  }else{ ?>
<iframe id="iframe" src="play.php">
</iframe>
<?php }  ?>
</div>
<script>
$(document).ready(function(){

$('#learn_more').click(function(){
$("#div_learn_more").toggle();

});

});
</script>
<div class="page_five" id="page_five">
			<div class="top">
					<h1><center><font size=5><b>OTHER KIDS WEBSITE</b></font></center></h1>
					<centeR><button type="submit" class="btn btn-success" id="learn_more">Learn More</button></center>
					<div id="div_learn_more" style="display:none">
					<p style="font-family: Crayon, sans-serif; font-size:20px; text-align:Center">Information about kids website can be found here. Some website are totaly free and others are need to paid. So, lets choose your own interest.</p>
					</div>
					<center><hr></center>
			</div>
					
					
						<!-- page 3.. recent project -->	
			<div class="gallery">
							<!-- first row -->
						
				<div class="row">				
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4" >
							<div class="thumbnail" >
							  <img src="images/galery/1.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>kidswithasthma</h3>
								<p>An interactive, kid-friendly website, developed by the National Asthma Council Australia to give kids with asthma and their parents the low down on all things asthma-related.</p>
								
							  </div>
							</div>
						  </div></a>
											  
						  
						  
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail" >
							 <img src="images/galery/2.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Arthur - PBS Website</h3>
								<p>Aimed at viewers between the ages of four and eight, ARTHUR's goal is to help foster an interest in reading and writing, and to encourage positive social skills. </p>
								
							  </div>
							</div>
						  </div></a>
						  
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail" >
							  <img src="images/galery/3.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Dotty and Boo Cat in the Stinky Wood</h3>
								<p>An animated story that children can watch, pause, and rewind on their own. At the end of the story there are a series of comprehension.</p>
								
							  </div>
							</div>
						  </div></a>
						
						
						<!-- 2nd row -->			
						
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/4.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Maya and Miguel - Videos section</h3>
								<p>PBS site - Video section. In this section of PBS kids website, your child will watch videos, including short clips and full episodes of their heroes, the twins Maya and Miguel and all their friends.</p>
								
							  </div>
							</div>
						  </div></a>
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/5.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Steve Songs - Official Website</h3>
								<p>Explore and browse videos, books, games, websites, and more...</p>
								
							  </div>
							</div>
						  </div></a>
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/6.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Word World- PBS Website</h3>
								<p>Part of PBS website. Welcome to WordWorld, the first preschool series where words are truly the stars of the show!</p>
								
							  </div>
							</div>
						  </div></a>
						
						
						<!-- 3rd row -->
						
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/7.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Happy Monster Band - Disney Junior Website</h3>
								<p>Part of Playhouse Disney - Happy Monster Band. In this section, children can watch videos and sing along with the monsters.</p>
								
							  </div>
							</div>
						  </div></a>
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/8.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Go, Diego Go</h3>
								<p>Diego is a 8-year-old little boy who lives with his parents in an animal rescue center in the rain forest. Diego helps animals in danger, together with his companion Baby Jaguar, his 11-year-old sister Olivia, Rescue Pack, Click.</p>
								
							  </div>
							</div>
						  </div></a>
						  <a data-toggle="lightbox" href="#show"><div class="col-sm-6 col-md-4">
							<div class="thumbnail">
							  <img src="images/galery/9.jpg" class="attribute"/><hr>
							  <div class="caption">
								<h3>Dora the Explorer</h3>
								<p>Dora the Explorer, a 7-year-old Latina girl and her friends actively engage preschoolers in a play-along, computer-style adventure, teaching them Spanish and other important skills on the way.</p>
								
							  </div>
							</div>
						  </div></a>
						
						
						<!-- end of page 3.. recent project -->	
						
								<script>			
											$('.thumbnail').click(function(){
									$('.modal-body').empty();
									//download link
									var link = $(this).children().attr('src');
									$('#download').attr('href',link);
									//show dialog
									var title = $(this).parent('a').attr("title");
									$('.modal-title').html(title);
									$($(this).parents('div').html()).appendTo('.modal-body');
									$('#myModal').modal({show:true});
								});
								</script>			

								<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
								  <div class="modal-dialog">
								  <div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">X</button>
										<h3 class="modal-title">OTHER KIDS WEBSITE</h3>
									</div>
									<div class="modal-body">
										
									</div>
									<div class="modal-footer">
									<a href="" class="btn btn-default" id="download" download="image.jpg">Visit</a>
										<button class="btn btn-default" data-dismiss="modal">Close</button>
									</div>
								   </div>
								  </div>
								</div>
				</div>		
			</div>

</div>
<div class="page_six" id="page_six">
	<div id="our_team">
		<div class="header">
		<h1><center><font size=5><b>OUR TEAM</b></font></center></h1>
		<center><hr></center>
		</div>
		<div class="row">
		<div class="col-sm-6 col-md-4" id="person" >
				  <img src="images/yash.jpg" class="img-circle" width=200px height=200px>
				  <div class="caption">
					<h4>DINESH</h4>
					<p><i>Project Manager</i></p>
					<a href="http://www.twetter.com" id="tweeter_icon"><img src="images/twetter.svg" class="img-circle" width=20px height=20px></a>
					<a href="http://www.heloo.com" id="xxx_icon"><img src="images/xxx.svg" class="img-circle" width=20px height=20px></a>
				  </div>
		</div>
		<div class="col-sm-6 col-md-4" id="person">
				  <img src="images/hendranata-black.jpg" class="img-circle" width=200px height=200px>
				  <div class="caption">
					<h4>HENDRANATA SAPUTRA</h4>
					<p><i>Developer</i></p>
					<a href="http://www.twetter.com" id="tweeter_icon"><img src="images/twetter.svg" class="img-circle" width=20px height=20px></a>
					<a href="http://www.facebook.com" id="facebook_icon"><img src="images/facebook.svg" class="img-circle" width=20px height=20px></a>
				  </div>
		</div>	
		<div class="col-sm-6 col-md-4" id="person">
						  <img src="images/pratik.jpg" class="img-circle" width=200px height=200px>
						  <div class="caption">
							<h4>PRATIK</h4>
							<p><i>Designer</i></p>
							<a href="http://www.twetter.com" id="tweeter_icon"><img src="images/twetter.svg" class="img-circle" width=20px height=20px></a>
					<a href="http://www.facebook.com" id="facebook_icon"><img src="images/facebook.svg" class="img-circle" width=20px height=20px></a>
						  </div>
		</div>	
		</div>

	
				
	</div>			
	<div id="get_in_touch">
		<div class="header">
				<h1><a href="#get_in_touch">LET'S GET IN TOUCH</a></h1>
				<center><hr></center>
		</div>
		<div class="row">
				<div class="col-md-6">
						  <img src="images/map.png"  width=100px height=50px>
						  <div class="caption">
							<h4>MEET US IN PERSON</h4>
							<p>Upper Thomsond Road</p>
							<p>Unit #204</p>
							<p>James Cook University (JCU)</p>
							<p>Singapore</p>

						  </div>
				</div>
				<div class="col-md-6">
						  <img src="images/mail.png" width=100px height=50px>
						  <div class="caption">
							<h4>THE TRADITIONAL WAY</h4>
							<p>Email us</p>
							<p><u>Admin@ict2.com</u></p>
							<p>Contact form</p>
							<a href="#page_seven"><p>Scroll down</p></a>

						  </div>
				</div>
		</div>		
				
	</div>
</div>
<div class="page_seven" id="page_seven">
<Script>
//email validation
$(document).ready(function(){
var valid=false;			
		
$("#contact_us_form").submit(function() {
//if empty value..
if($("#name").val() =='')
{
$("#name").css("border","1px solid red");
valid=false;
}
if($("#email_2").val() =='')
{
$("#email_2").css("border","1px solid red");
valid=false;
}
if($("#message").val() =='')
{
$("#message").css("border","1px solid red");
valid=false;
}

//if not empty..
if($("#name").val() !='')
{
$("#name").css("border-color","black");
}
if($("#message").val() !='')
{
$("#message").css("border-color","black");
}
if($("#email_2").val() !='')
{
$("#email_2").css("border-color","black");
}

//true if...

if($("#name").val() !='' && $("#email_2").val() !='' && $("#message").val() !='') {
valid=true;

}




if(valid)
{
return true;
}else
{

return false;
}

});


});
</script>
	
			<div class="row">
				<form id="contact_us_form" class="form-horizontal" method="POST" action="email.php">
				  
					<input type="text"  id="target" name="target"  value="contact_us" class="hide"></input>
					<div class="col-sm-12">
					  <i><input type="text" class="form-control text" id="name" name="name" placeholder="Name" style="height:70px;" ></i>
					</div>
				  
				  
					
					<div class="col-sm-12">
					   <i><input type="email" class="form-control text" id="email_2" name="email" placeholder="Email" style="height:70px"></i>
					</div>
				 
				 
					
					<div class="col-sm-12">
					   <i><input type="text" class="form-control text" id="phone_2" name="phone"  placeholder="Phone" style="height:70px"></i>
					</div>
				  
				  
					
					<div class="col-sm-12">
					   <i><textarea type="text" class="form-control text" id="message" name="message" placeholder="Message..." style="height:150px;" ></textarea></i>
					</div>
				  
				   <p class="ok_button">
					<button type="submit" class="send">Send Message</button>
					</p>
				  
				 
				 
				</form>
		
			</div>


 <p class="footer">ICT2 - TeamWebster</p>
</div>

</body>
</html>